<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="verify">
            <div class="title">实名认证</div>
            <div class="content">
              <div class="from" v-if="onOff">
                <el-form
                  :label-position="labelPosition"
                  ref="ruleForm"
                  :rules="rules"
                  label-width="80px"
                  :model="formLabelAlign"
                >
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="formLabelAlign.name"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="idcard">
                    <el-input v-model="formLabelAlign.idcard"></el-input>
                  </el-form-item>
                </el-form>
                <el-button type="primary" @click="submit('ruleForm')">立即提交认证</el-button>
              </div>
              <div class="from" v-else>
                <el-form
                  :label-position="labelPosition"
                  label-width="80px"
                  :model="formArry"
                >
                  <el-form-item label="用户账号" >
                    <el-input v-model="formArry.name" :disabled = true></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号" >
                    <el-input v-model="formArry.idcard" :disabled= true></el-input>
                  </el-form-item>
                </el-form>
                <el-button type="info" :disabled=true>已 认 证 成 功</el-button>
              </div>
            </div>
            <div class="notice">
              <h2>认证前请仔细阅读以下须知</h2>
              <p>1. 根据《中华人民共和国网络安全法》第二十四条的相关规定，使用我司服务需先进行实名认证。</p>
              <p>2. 请确保提供的信息真实有效，以便我司审核处理。</p>
              <p>3. 如果您需要使用如下行业的相关闪信模板，必须为企业/组织认证：教育、医疗、在线商城、金融理财、事业单位、政府机关、新闻媒介等。企业认证请联系售后客服人工处理。</p>
              <p>4. 个人认证可以升级为企业/组织认证，但是企业/组织认证无法降级为个人认证。</p>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的姓名"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的身份证号"));
      } else {
        callback();
      }
    };
    return {
      onOff:'true',
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        idcard: ""
      },
      formArry:{},
      rules: {
        name: [{ validator: validatePass, trigger: "blur" }],
        idcard: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  created () {
    this.$ajax
      .get("getSmsUserSummary.ashx?userId=" +getCookie("userid") +"&token=" +getCookie("token"))
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          if(data.idNumber){
            this.onOff = false;
            this.formArry.name = data.phoneNumber
            this.formArry.idcard = data.idNumber
          }
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$ajax.get("authentication.ashx?userId=" +getCookie('userid') +'&token=' + getCookie('token') + '&identityCard='+this.formLabelAlign.idcard+'&realName='+this.formLabelAlign.name)
          .then( res=>{

            if(res.data.code == '200'){
              this.$message({
                type:'success',
                message:'恭喜您，认证成功！',
                onClose:()=>{
                  this.onOff = false;
                }
              })
            }else{
              this.$message.error(res.data.msg);
            }
          })
          .catch( error=>{
            console.log(error)
          })

        } else {
          this.$message.error('请填写完整信息');
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.verify {
  padding-bottom: 30px;
  text-align: left;
}
.verify .title {
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}
.content {
  width: 100%;
  background: #fff;
  padding: 20px;
  display: table;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.from {
  width: 50%;
  margin: 0 auto;
}
.notice {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 30px 30px;
  background: #fff;
  text-align: left;
  color: #666;
}
.notice h2 {
  margin-bottom: 30px;
}
.notice p {
  line-height: 25px;
}
</style>
  